<datatable-demos></datatable-demos>

<div class="content-section introduction">
    <div>
        <span class="feature-title">DataTable</span>
        <span>Incell editing is enabled by setting editable property true both on datatable and columns, when a cell is clicked edit mode is activated, clicking outside of cell or hitting the enter key 
        switches back to view mode after updating the value.</span>
    </div>
</div>

<div class="content-section implementation ui-fluid">
    <p-dataTable [value]="cars" [editable]="true">
        <p-column field="vin" header="Vin" [editable]="true"></p-column>
        <p-column field="year" header="Year" [editable]="true"></p-column>
        <p-column field="brand" header="Brand" [editable]="true">
            <ng-template let-col let-car="rowData" pTemplate="editor">
                <p-dropdown [(ngModel)]="car[col.field]" [options]="brands" [autoWidth]="false" [style]="{'width':'100%'}" required="true" appendTo="body"></p-dropdown>
            </ng-template>
        </p-column>
        <p-column field="color" header="Color" [editable]="true"></p-column>
        <p-column field="saleDate" header="Sale Date" [editable]="true" [style]="{'overflow':'visible'}">
            <ng-template let-col let-car="rowData" pTemplate="body">
                {{car[col.field]|date}}
            </ng-template>
            <ng-template let-col let-car="rowData" pTemplate="editor">
                <p-calendar [(ngModel)]="car[col.field]"></p-calendar>
            </ng-template>
        </p-column>
    </p-dataTable>
</div>

<div class="content-section documentation">
    <p-tabView effect="fade">
        <p-tabPanel header="datatableeditabledemo.ts">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/datatable/datatableeditabledemo.ts" class="btn-viewsource" target="_blank">
                <i class="fa fa-github"></i>
                <span>View on GitHub</span>
            </a>
<pre>
<code class="language-typescript" pCode ngNonBindable>
export class DataTableEditableDemo implements OnInit &#123;

    cars: Car[];

    constructor(private carService: CarService) &#123; &#125;

    ngOnInit() &#123;
        this.carService.getCarsSmall().then(cars => this.cars = cars);
    &#125;
&#125;
</code>
</pre>            
        </p-tabPanel>

        <p-tabPanel header="datatableeditabledemo.html">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/datatable/datatableeditabledemo.html" class="btn-viewsource" target="_blank">
                <i class="fa fa-github"></i>
                <span>View on GitHub</span>
            </a>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-dataTable [value]="cars" [editable]="true"&gt;
    &lt;p-column field="vin" header="Vin" [editable]="true"&gt;&lt;/p-column&gt;
    &lt;p-column field="year" header="Year" [editable]="true"&gt;&lt;/p-column&gt;
    &lt;p-column field="brand" header="Brand" [editable]="true"gt;
        &lt;ng-template let-col let-car="rowData" pTemplate="editor"&gt;
            &lt;p-dropdown [(ngModel)]="car[col.field]" [options]="brands" [autoWidth]="false" [style]="&#123;'width':'100%'&#125;" required="true"  appendTo="body"&gt;&lt;/p-dropdown&gt;
        &lt;/ng-template&gt;
    &lt;/p-column&gt;
    &lt;p-column field="color" header="Color" [editable]="true"&gt;&lt;/p-column&gt;
    &lt;p-column field="saleDate" header="Sale Date" [editable]="true" [style]=" &#123;'overflow':'visible' &#125;"&gt;
        &lt;ng-template let-col let-car="rowData" pTemplate="body"&gt;
             &#123;&#123;car[col.field]|date &#125;&#125;
        &lt;/ng-template&gt;
        &lt;ng-template let-col let-car="rowData" pTemplate="editor"&gt;
            &lt;p-calendar [(ngModel)]="car[col.field]"&gt;&lt;/p-calendar&gt;
        &lt;/ng-template&gt;
    &lt;/p-column&gt;
&lt;/p-dataTable&gt;
</code>
</pre>
        </p-tabPanel>
    </p-tabView>
</div>